import { ElMessageBox } from 'element-plus';
import { FORMAT_DATE } from '@/utils/const';
import userStore from '@/store/modules/user';
import { companyGroupOne } from '@/api/system';

// 注入组件内数据
const componentData = ref({});
export const injectData = obj => {
  componentData.value = { ...componentData.value, ...obj };
};

// 模态框相关
export const showEdit = ref(false);
export const activeRow = ref({});
export const dialogType = ref('1'); // 1新增团队 2编辑 3新增下级
export const handleAdd = () => {
  activeRow.value = {};
  dialogType.value = '1';
  showEdit.value = true;
};

export const searchParams = reactive({});

// 查询条件
export const formItems = reactive({
  name: {
    component: 'input',
    label: '团队名称',
    placeholder: '请输入团队名称',
    maxlength: 100
  }
});

// 表格字段
export const columns = ref([
  { prop: 'id', label: '团队ID' },
  { prop: 'name', label: '团队名称' },
  { prop: 'parents', label: '所属上级' },
  {
    prop: 'creator_id',
    label: '创建人',
    format(data) {
      return userStore().userMap[data]?.label;
    }
  },
  {
    prop: 'created_at',
    label: '创建时间',
    minWidth: 170,
    format(data) {
      return FORMAT_DATE(data, 'YYYY-MM-DD HH:mm:ss');
    }
  },
  {
    label: '操作',
    width: '200px',
    fixed: 'right',
    buttons: [
      {
        label: '编辑',
        click({ row }) {
          activeRow.value = row;
          dialogType.value = '2';
          showEdit.value = true;
        }
      },
      {
        label: '新增下级',
        click({ row }) {
          activeRow.value = row;
          dialogType.value = '3';
          showEdit.value = true;
        }
      },
      {
        label: '删除',
        type: 'danger',
        click({ row }) {
          const canDelete = true;
          if (canDelete) {
            ElMessageBox({
              title: '操作确认',
              message: `删除团队不可恢复。确认删除 { ${row.parents} }  的<span style="color:var(--el-color-warning)"> { ${row.name} } </span>吗？`,
              dangerouslyUseHTMLString: true,
              type: 'warning',
              showCancelButton: true,
              beforeClose: (action, instance, done) => {
                if (action !== 'confirm') return done();
                instance.confirmButtonLoading = true;
                companyGroupOne({ id: row.id })
                  .then(() => done())
                  .finally(() => (instance.confirmButtonLoading = false));
              }
            })
              .then(() => {
                $msg.success('删除团队成功');
                componentData.value.reload();
              })
              .catch(() => {
                console.log('取消删除团队');
              });
          } else {
            // 团队或子团队仍有绑定的用户，点击删除将弹出二次确认窗口，文案为：
            // 团队或子团队仍有绑定的用户，不可删除！

            // 团队或子团队产生业务数据时，点击删除将弹出提示窗口，文案为：
            // 团队或子团队产生业务数据，不可删除！
            const msg1 = '团队或子团队仍有绑定的用户，不可删除！';
            const msg2 = '团队或子团队产生业务数据，不可删除！';
            ElMessageBox({
              title: '提示',
              message: `<span style="color:var(--el-color-danger)">${msg1}</span>`,
              dangerouslyUseHTMLString: true,
              showConfirmButton: false,
              showCancelButton: true,
              cancelButtonText: '关闭',
              type: 'error'
            });
          }
        }
      }
    ]
  }
]);
